<template>
  <div>
    <div>
      <el-button
        style="float: right"
        type="success"
        icon="el-icon-user-solid"
        @click="TakeSK()"
        >新增</el-button
      >
    </div>
    <!-- 商品信息 -->
    <el-table :data="UserRolelist" style="width: 100%">
      <el-table-column prop="Id" label="用户Id" lang="crente">
      </el-table-column>
      <el-table-column prop="UserName" label="账号" lang="crente">
      </el-table-column>
      <el-table-column prop="UserAge" label="年龄" lang="crente">
      </el-table-column>
      <el-table-column prop="RealName" label="昵称" lang="crente">
      </el-table-column>
      <el-table-column prop="Phone" label="手机号" lang="crente">
      </el-table-column>
      <el-table-column prop="RoleName" label="角色" lang="crente">
        <template slot-scope="scope">
          <el-tag
            v-for="(item, index) in scope.row.LisrUserRoleDtosList"
            :key="index"
          >
            {{ item.RoleName }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="Email" label="邮箱" lang="crente">
      </el-table-column>
      <el-table-column label="操作" lang="crente">
        <template slot-scope="scope">
          <el-button
            type="warning"
            icon="el-icon-edit"
            @click="TakeSK(scope.row.Id)"
          ></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete-solid"
            @click="UserDel(scope.row.Id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        v-if="dialogVisible"
      >
        <UserroleAdd
          :Userids="Userids"
          @Colseupdate="Colseupdate"
        ></UserroleAdd>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import UserroleAdd from "./BPMN2";

export default {
  components: {
    UserroleAdd,
  },
  data() {
    return {
      dialogVisible: false,
      UserRolelist: [],
      Userids: null,
    };
  },
  //加载
  created() {
    this.GetUserlist();
  },
  //方法
  methods: {
    //删除
    UserDel(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.axios
            .delete("http://localhost:15670/api/RoleUser/UserDelete?id=" + id)
            .then((res) => {
              if (res.data.Success) {
                this.$message.success(res.data.Message);
                this.GetUserlist();
              } else {
                this.$message.success(res.data.Message);
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //显示
    GetUserlist() {
      this.axios
        .get("http://localhost:15670/api/RoleUser/GetUserRole")
        .then((res) => {
          this.UserRolelist = res.data.Data;
        });
    },
    Colseupdate() {
      this.dialogVisible = false;
      this.GetUserlist();
    },
    TakeSK(Userids) {
      this.Userids = Userids;
      this.dialogVisible = true;
    },
  },
};
</script>
<style>
</style>